<template>
	<div class="nav-header-bg">
		<div class="nav-logo-wrap">
			<div class="nav-logo-bg">
				<span class="nav-logo">Sunny Power</span>
			</div>
		</div>

		<!-- 语言选择按钮 -->
		<div class="language-switcher">
			<div class="lang-btn" @click="showLanguagePopup = true">
				<div class="lang-icon">
					<span>{{ locale.toUpperCase() }}</span>
				</div>
			</div>
		</div>

		<!-- 语言选择弹窗 -->
		<van-popup
			v-model:show="showLanguagePopup"
			position="right"
			round
			:style="{ width: '80%', maxWidth: '300px' }"
		>
			<div class="language-popup">
				<div class="popup-title">{{ t('language') }}</div>
				<div class="language-list">
					<div
						class="language-item"
						:class="{ active: locale === 'zh' }"
						@click="changeLanguage('zh')"
					>
						<span class="lang-name">中文</span>
						<van-icon
							v-if="locale === 'zh'"
							name="success"
							color="#69D100"
						/>
					</div>
					<div
						class="language-item"
						:class="{ active: locale === 'en' }"
						@click="changeLanguage('en')"
					>
						<span class="lang-name">English</span>
						<van-icon
							v-if="locale === 'en'"
							name="success"
							color="#69D100"
						/>
					</div>
					<div
						class="language-item"
						:class="{ active: locale === 'es' }"
						@click="changeLanguage('es')"
					>
						<span class="lang-name">Español</span>
						<van-icon
							v-if="locale === 'es'"
							name="success"
							color="#69D100"
						/>
					</div>
					<div
						class="language-item"
						:class="{ active: locale === 'fr' }"
						@click="changeLanguage('fr')"
					>
						<span class="lang-name">Français</span>
						<van-icon
							v-if="locale === 'fr'"
							name="success"
							color="#69D100"
						/>
					</div>
				</div>
			</div>
		</van-popup>
		<div class="nav-header-bar">
			<van-icon
				v-if="canGoBack"
				name="arrow-left"
				class="nav-back"
				@click="handleBack"
			/>
			<span v-else class="nav-back-placeholder"></span>
			<div class="nav-title">{{ title }}</div>
			<van-icon name="share-o" class="nav-share" @click="handleShare" />
			<!-- <span class="nav-back-placeholder"></span> -->
		</div>
		<StepProgress
			v-if="showStepProgress"
			:steps="steps"
			:current="current"
			class="nav-step-progress"
		/>
	</div>
</template>

<script lang="ts">
export default {
	name: 'NavHeader',
}
</script>

<script setup lang="ts">
import StepProgress from './StepProgress.vue'
import { Icon } from 'vant'
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'
import { setLocale } from '../i18n'
import { Locale } from 'vant'

import enUS from 'vant/es/locale/lang/en-US'
import zhCN from 'vant/es/locale/lang/zh-CN'

const { t, locale } = useI18n()

// 引入英文语言包

const router = useRouter()
// 语言选择弹窗状态
const showLanguagePopup = ref(false)
const props = withDefaults(
	defineProps<{
		title: string
		showStepProgress?: boolean
		current?: number
		useDefaultBack?: boolean
		shareTitle?: string
		shareText?: string
		shareUrl?: string
	}>(),
	{
		useDefaultBack: true,
		shareTitle: 'Sunny Power',
		shareText: '查看我的安装预约',
		shareUrl: window.location.href,
	}
)

const emit = defineEmits<{
	(e: 'back'): void
	(e: 'share'): void
}>()
// 手动切换语言的函数
function changeLanguage(lang: string) {
	console.log('尝试切换语言到:', lang)
	if (setLocale(lang)) {
		// showToast({
		// 	message: `语言已切换到: ${lang}`,
		// 	position: 'top',
		// })
		if (lang == 'zh') {
			Locale.use('zh-CN', zhCN)
		} else {
			Locale.use('en-US', enUS)
		}

		// 关闭语言选择弹窗
		showLanguagePopup.value = false
	}
}
// 计算是否可以返回
const canGoBack = computed(() => {
	return router.options.history.state.back !== null
})

// 处理返回操作
const handleBack = () => {
	if (props.useDefaultBack) {
		console.log('返回')
		router.back()
	} else {
		console.log('返回back')
		emit('back')
	}
}

// 处理分享操作
const handleShare = async () => {
	if (navigator.share) {
		try {
			await navigator.share({
				title: props.shareTitle,
				text: props.shareText,
				url: props.shareUrl,
			})
		} catch (error) {
			if (error instanceof Error && error.name !== 'AbortError') {
				showToast('分享失败')
			}
		}
	} else {
		showToast('当前浏览器不支持系统分享功能')
	}
}

const steps = [
	{ label: 'stepProgress.installDesc' },
	{ label: 'stepProgress.basicInfo' },
	{ label: 'stepProgress.installPosition' },
	{ label: 'stepProgress.circuitInfo' },
	{ label: 'stepProgress.finish' },
]
</script>

<style lang="scss" scoped>
.nav-header-bg {
	position: relative;
	width: 100%;
	background: linear-gradient(155deg, #9bc0ff 3.15%, #d3efff 44.29%);
	min-height: 120px;
	padding-top: 15px;
	padding-bottom: 12px;
	box-sizing: border-box;
}
.nav-logo-wrap {
	height: 23px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0px;
}
.nav-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	height: 56px;
	position: relative;
	margin-top: 18px;
}
.nav-back {
	font-size: 24px;
	color: #333;
	width: 24px;
}
.nav-back-placeholder {
	width: 24px;
}
.nav-share {
	font-size: 22px;
	color: #0065d1;
	width: 24px;
}
.nav-title {
	font-size: 16px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 600;
	color: #000;
	text-align: center;
}
.nav-logo-bg {
	width: 94px;
	height: 23px;
	background: rgba(239, 238, 238, 0.5);
	border-radius: 11.5px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-logo {
	font-size: 11px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 600;
	color: #000;
	letter-spacing: -0.3px;
}
.nav-step-progress {
	margin-top: 8px;
}
// 变量定义
$primary-color: #69d100;
$secondary-color: #3a3a3a;
$background-color: #f3f4f6;
$card-bg-color: #ffffff;
$text-color: #000000;
$gray-text: #a4a4a4;
$dark-gray-text: #595959;
$light-gray-bg: #ebf3df;
$warning-color: #ffbe28;
.language-switcher {
	position: absolute;
	top: -3px;
	z-index: 100;
	background-color: transparent;
	max-width: 50px;
	min-width: 43px;
	justify-content: center;
	box-shadow: none;
	// width: 40px;
	.lang-btn {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		// background-color: rgba(255, 255, 255, 0.7);
		// backdrop-filter: blur(4px);
		// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.2s ease;

		&:hover {
			background-color: rgba(255, 255, 255, 0.9);
		}

		.lang-icon {
			font-size: 14px;
			font-weight: 700;
			color: $secondary-color;
		}
	}
}

.language-popup {
	padding: 20px;

	.popup-title {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 15px;
		text-align: center;
		color: $secondary-color;
	}

	.language-list {
		display: flex;
		flex-direction: column;
		gap: 15px;

		.language-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px;
			border-radius: 8px;
			background-color: #f5f5f5;
			cursor: pointer;
			transition: all 0.2s ease;

			&:hover {
				background-color: #efefef;
			}

			&.active {
				background-color: $light-gray-bg;
			}

			.lang-name {
				font-size: 16px;
				font-weight: 600;
				color: $secondary-color;
			}
		}
	}
}
</style>
